<!DOCTYPE html>
<html>
<head>
<title>Get location</title>

<script type="text/javascript" src="AjaxHandler.js"></script>
<script type="text/javascript">

var t;
var INTERVAL = 10000;
var ajax = new AjaxHandler();


function startTracking() {
	document.getElementById("info").innerHTML += "Start tracking <br/>";
	updateLocation();
	
	t = setInterval(updateLocation, INTERVAL);
}


// Send AJAX request to server.php to write location to the txt file
function updateLocation() {
	// HTML5 Geolocation method
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(function(position) {
			// Success
			if (t != null) {
				// Send latlng to server.php
				ajax.setOnCompleteCallback(function () {
					document.getElementById("info").innerHTML += position.coords.latitude + "," + position.coords.longitude + "<br/>";
				});
				
				ajax.sendRequest("server.php", {
					lat: position.coords.latitude,
					lng: position.coords.longitude
				});
			}
		}, function() {
			// Failed
			if (t != null) {
				document.getElementById("info").innerHTML += "Failed <br/>";
			}
		});
	} 
	
	else alert("Not supported");

}


function stopTracking() {
	clearInterval(t);
	t = null;
	
	document.getElementById("info").innerHTML += "Stop tracking <br/>";
}
</script>
</head>

<div id="info"></div>

<button onclick = "startTracking()">Start tracking</button>
<button onclick = "stopTracking()">Stop tracking</button>

</html>